<template>
	<div class="GlobalPictureSet">
		<div class="person-img-box" @mouseover="showPerson" @mouseout="hidePerson">
			<div :key="item.id" v-for="(item, index) in props.list">
				<img
					:src="defaultImage"
					:style="getImageStyle(index)"
					class="person-img"
					@mouseover="handleMouseOver(index)"
					@mouseout="handleMouseOut"
				/>

				<div v-if="showPersonInfoVisible" class="person-info-box" :style="tooltipStyle">
					<div class="tooltip-arrow" :style="tooltipArrowStyle"></div>
					<img :src="!item.detectImage ? defaultImage : item.detectImage" class="person-img" alt="" @error="imgError" />
					<img :src="!item.imageLocation ? defaultImage : item.imageLocation" class="person-img" alt="" @error="imgError" />
					<div class="base-info">
						<div class="name">
							<span class="name-text">{{ item.personName }}</span>
							<span class="number">{{ !item.number ? '' : ` (${item.number})` }}</span>
						</div>
						<div class="info">部门: {{ item.deptStr }}</div>
						<div class="info">管理员: {{ c_ManageName(item.managerList) }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import defaultImage from '@/global-assets/imgs/img-none.png';

const props = withDefaults(defineProps<{ list: any[] }>(), {
	list: () => []
});

// const imgList = ref([defaultImage, defaultImage, defaultImage, defaultImage, defaultImage]);
const imgError = (event: any) => {
	console.log('imgError', event);
	let img = event.srcElement;
	img.src = defaultImage;
	img.onerror = null;
};

const c_ManageName = computed(() => {
	return (list: any[]) => {
		if (!Array.isArray(list) || !list.length) {
			return '';
		}
		return list.map((x: any) => x.name).join('/');
	};
});

// 计算每张图片的样式
const hoveredIndex = ref<number | null>(null);
const showPersonInfoVisible = ref(false);
const getImageStyle = (imgIndex: number) => {
	return {
		zIndex: hoveredIndex.value === imgIndex ? 1999 : imgIndex,
		// marginRight: imgIndex === imgList.value.length - 1 ? '0' : '-8px',
		border: hoveredIndex.value === imgIndex ? '1px solid #305dc2' : '1px solid #0a1225',
		transition: 'margin-right 0.1s ease, z-index 0.1s ease, border 0.1s ease'
	};
};

// 悬停处理函数
const handleMouseOver = (index: number) => {
	hoveredIndex.value = index;
};

// 移出悬停处理函数
const handleMouseOut = () => {
	hoveredIndex.value = null;
};
const tooltipStyle = ref({});
const tooltipArrowStyle = ref({});
const showPerson = (event: any) => {
	showPersonInfoVisible.value = true;
	const rect = event.target.getBoundingClientRect();
	if (rect.top && rect.left) {
		let leftPosition = rect.left - 142;
		console.log(window.innerWidth, rect.left - 142 + 284);

		if (rect.left + 142 > window.innerWidth - 20) {
			console.log('超出屏幕');
			leftPosition = window.innerWidth - 304;
		}
		tooltipStyle.value = {
			top: `${rect.top - 104}px`, // 定位在 div 上方 40px
			left: `${leftPosition}px`
		};
		tooltipArrowStyle.value = {
			left: `${rect.left + 8}px`,
			top: `${rect.top - 14}px` // 定位在 div 上方 40px
		};
	}
};

const hidePerson = () => {
	showPersonInfoVisible.value = false;
};
</script>

<style lang="less" scoped>
.GlobalPictureSet {
	.person-img-box {
		top: 0;
		display: flex;
		height: 26px;
		justify-content: flex-end; /* 从右往左排列 */
		flex: 1;

		.person-img {
			position: relative;
			top: 0;
			width: 24px;
			height: 24px;
			border: 1px solid #0a1225;
			border-radius: 4px;
			transition:
				margin-right 0.3s ease,
				z-index 0.3s ease,
				border 0.3s ease;
		}

		.person-info-box {
			position: fixed;
			z-index: 1999;
			display: flex;
			width: 284px;
			height: 94px;
			border-radius: 4px;
			padding: 14px 16px;
			background: rgba(21, 23, 27, 0.95);

			.tooltip-arrow {
				position: fixed;
				width: 8px;
				height: 8px;
				border-radius: 2px;
				background-color: rgba(21, 23, 27, 0.95);
				transform: rotate(45deg);
			}

			.person-img {
				width: 64px;
				height: 64px;
				border-radius: 4px;

				&:first-child {
					margin-right: 4px;
				}
			}

			.img-scene {
				width: 64px;
				height: 64px;
				margin-right: 4px;
			}

			.base-info {
				overflow: hidden;
				margin-left: 7px;
				flex: 1;

				.name {
					overflow: hidden;
					margin-bottom: 4px;
					font-size: 14px;
					line-height: 20px;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: @text02;

					.name-text {
						font-weight: 700;
						color: @text01;
					}

					.number {
						font-size: 12px;
						font-weight: 400;
						color: @text02;
					}
				}

				.info {
					overflow: hidden;
					font-size: 12px;
					line-height: 20px;
					text-overflow: ellipsis;
					color: @text03;
				}
			}
		}
	}
}
</style>
